<html>
    <head>
        <title>SIMILE | Timeline | Examples | The Life of Monet</title>
        <link rel='stylesheet' href='../styles.css' type='text/css' />
        <script src="../../api/timeline-api.js" type="text/javascript">
        </script>
        <script>
            var tl;
            function onLoad(){
                var eventSource = new Timeline.DefaultEventSource(0);
                
                var theme = Timeline.ClassicTheme.create();
                theme.event.bubble.width = 320;
                theme.event.bubble.height = 220;
                theme.mouseWheel = 'zoom'; // 'default', 'zoom', 'scroll'
                theme.ether.backgroundColors[1] = theme.ether.backgroundColors[0];
                var d = Timeline.DateTime.parseGregorianDateTime("1870")
                var bandInfos = [Timeline.createBandInfo({
                    width: "10%",
                    intervalUnit: Timeline.DateTime.MONTH,
                    intervalPixels: 100,
                    date: d,
                    showEventText: false,
                    theme: theme,
                    zoomIndex: 10,
                    zoomSteps: new Array({
                        pixelsPerInterval: 280,
                        unit: Timeline.DateTime.HOUR
                    }, {
                        pixelsPerInterval: 140,
                        unit: Timeline.DateTime.HOUR
                    }, {
                        pixelsPerInterval: 70,
                        unit: Timeline.DateTime.HOUR
                    }, {
                        pixelsPerInterval: 35,
                        unit: Timeline.DateTime.HOUR
                    }, {
                        pixelsPerInterval: 400,
                        unit: Timeline.DateTime.DAY
                    }, {
                        pixelsPerInterval: 200,
                        unit: Timeline.DateTime.DAY
                    }, {
                        pixelsPerInterval: 100,
                        unit: Timeline.DateTime.DAY
                    }, {
                        pixelsPerInterval: 50,
                        unit: Timeline.DateTime.DAY
                    }, {
                        pixelsPerInterval: 400,
                        unit: Timeline.DateTime.MONTH
                    }, {
                        pixelsPerInterval: 200,
                        unit: Timeline.DateTime.MONTH
                    }, {
                        pixelsPerInterval: 100,
                        unit: Timeline.DateTime.MONTH
                    } // DEFAULT zoomIndex
            )
                }), Timeline.createBandInfo({
                    width: "90%",
                    intervalUnit: Timeline.DateTime.DECADE,
                    intervalPixels: 200,
                    eventSource: eventSource,
                    date: d,
                    theme: theme
                })];
               
                bandInfos[0].syncWith = 1;
                bandInfos[0].highlight = false;
               
                tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
                tl.loadXML("http://127.0.0.1:8000/ts/timeline-webapp/examples/monet/monet.xml", function(xml, url){
                    eventSource.loadXML(xml, url);
                });
            }
            
            var resizeTimerID = null;
            function onResize(){
                if (resizeTimerID == null) {
                    resizeTimerID = window.setTimeout(function(){
                        resizeTimerID = null;
                        tl.layout();
                    }, 500);
                }
            }
        </script>
    </head>
    <body onload="onLoad();" onresize="onResize();">
        <ul id="path">
            <li>
                <a href="http://simile.mit.edu/" title="Home">SIMILE</a>
            </li>
            <li>
                <a href="../../" title="Timeline">Timeline</a>
            </li>
            <li>
                <a href="../" title="Examples">Examples</a>
            </li>
            <li>
                <span>The Life of Monet</span>
            </li>
        </ul>
        <div id="body">
            <h1>The Life of Monet</h1>
            <p>
                Sources:
                <ul>
                    <li>
                        <a href="http://en.wikipedia.org/wiki/Monet">http://en.wikipedia.org/wiki/Monet</a>
                    </li>
                    <li>
                        <a href="http://www.accents-n-art.com/artists/claude-monet-biography.html">http://www.accents-n-art.com/artists/claude-monet-biography.html</a>
                    </li>
                </ul>
            </p>
            <div id="tl" class="timeline-default" style="height: 400px;">
            </div>
        </div>
    </body>
</html>
